<template>
	<view class="user" :style="{marginTop:topHeight+'px'}">
		<view class="avator">
			<image @tap="goToupdate" class="avator-img" :src="userInfo.icon"></image>
			<view class="avator-name">
				<view class="avator-name-nickname">{{userInfo.nickname}}</view>
				<view class="avator-name-username">用户名:{{userInfo.username}}</view>
			</view>
		</view>

		<view class="operate" v-if="!operateIsShow">
			<view  @tap="goRegister"  class="operate-btn operate-register">注册</view>
			<view @tap="goToLogin" class="operate-btn operate-login">登录</view>
		</view>

		<view class="order">
			<view class="order-title">我的订单</view>
			<view class="order-operate">
				<view @tap="goToOrder(0)" class="order-operate-item">
					<i class="iconfont order-operate-item-img icon-wallet"></i>
					<view class="order-operate-item-title">待付款</view>
				</view>
				<view  @tap="goToOrder(1)" class="order-operate-item">
					<i class="iconfont order-operate-item-img icon-yifukuan"></i>
					<view class="order-operate-item-title">已付款</view>
				</view>
				<view  @tap="goToOrder(2)" class="order-operate-item">
					<i class="iconfont order-operate-item-img icon-yifahuodefuben"></i>
					<view class="order-operate-item-title">已发货</view>
				</view>
				<view  @tap="goToOrder(3)" class="order-operate-item">
					<i class="iconfont order-operate-item-img icon-renwu"></i>
					<view class="order-operate-item-title">已收货</view>
				</view>
				<view  @tap="goToOrder(4)" class="order-operate-item">
					<i class="iconfont order-operate-item-img icon-shouhou"></i>
					<view class="order-operate-item-title">售后</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="bottom-item">
				<i class="iconfont bottom-item-img icon-shangpinshoucangcollect"></i>
				<view @tap="goToProductCollect" class="bottom-item-title">商品收藏</view>
			</view>
			<view @tap="notOpen" class="bottom-item">
				<!-- <uni-icons class="bottom-item-img" custom-prefix="iconfont" type="icon-pinpai" size="26">
				</uni-icons> -->
				<i class="iconfont bottom-item-img icon-pinpai"></i>
				<view class="bottom-item-title">品牌</view>
			</view>

			<view @tap="goToArticalCollect" class="bottom-item">
				<i class="iconfont bottom-item-img icon-woderenwu"></i>
				<view class="bottom-item-title">文章收藏</view>
			</view>

			<view @tap="goToAddress()" class="bottom-item">
				<i class="iconfont bottom-item-img icon-shouhuodizhi"></i>
				<view class="bottom-item-title">地址</view>
			</view>


			<view @tap="notOpen" class="bottom-item">
				<i class="iconfont bottom-item-img icon-youhuiquan"></i>
				<view class="bottom-item-title">卡包</view>
			</view>


			<view @tap="goToCart" class="bottom-item">
				<i class="iconfont bottom-item-img icon-gouwuche"></i>
				<view class="bottom-item-title">购物车</view>
			</view>
			<view @tap="notOpen" class="bottom-item">
				<i class="iconfont bottom-item-img icon-dianhua"></i>
				<view class="bottom-item-title">联系客服</view>
			</view>


		</view>

	</view>
</template>

<script>
	import mixin from '../../mixin/index.js'
	import {
		getMemberInfo as getMemberInfoApi
	} from '../../api/user/index.js'
	import {showTip} from '../../utils/index.js'
	export default {
		name: 'User',
		data() {
			return {
				topHeight: 0,
				avatorUrl: '',
				userInfo: {},
				operateIsShow: false
			}
		},
		mixins: [mixin],
		onLoad() {
			this.topHeight = uni.getStorageSync('topHeight');
			this.getUserInfo();

		},
		onShow() {
			this.operateIsShow = uni.getStorageSync('token').length ? true : false;
			this.checkLoginStatus();

		},
		methods: {
			//跳转到更新信息
			goToupdate(){
				uni.navigateTo({
					url:'updateInfo/updateInfo'
				})
			},
			//跳转到地址详情
			goToAddress(user){
				uni.setStorageSync('user','user')
				uni.navigateTo({
					url:`../productDetail/address/address`
				})
			},
			//暂未开通
			notOpen(){
				showTip('抱歉,暂未开通此功能!','error')
			},
			//跳转到文章收藏页面
			goToArticalCollect(){
				uni.navigateTo({
					url:'articalCollect/articalCollect'
				})
			},
			//跳转到商品收藏页面
			goToProductCollect(){
				uni.navigateTo({
					url:'productCollect/productCollect'
				})
			},
			//跳转到订单页面
			goToOrder(current){
				uni.navigateTo({
					url:`orderDetail/orderDetail?current=${current}`
				})
			},
			//跳转到购物车页面
			goToCart(){
				uni.navigateTo({
					url:'cart/cart'
				})
			},
			//跳转到注册页面
			goRegister(){
				uni.navigateTo({
					url: 'register/register'
				})
			},
			//跳转到登录页面
			goToLogin() {
				uni.navigateTo({
					url: 'login/login'
				})
			},
			getUserInfo() {
				getMemberInfoApi()
					.then(res => {
						// console.log('用户登录信息', res);
						uni.setStorageSync('userInfo',res.data.userInfo)
						this.userInfo = res.data.userInfo;
					})
			}
		}
	}
</script>

<style lang="scss" scope>
	.btn {
		background-color: red;
	}

	.user {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		min-height: calc(100vh - 90rpx);
		padding: 0 30rpx 0;
		background-color: #f1ece7;

		.avator {
			display: flex;
			align-items: center;
			height: 270rpx;

			&-img {
				display: block;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}

			&-name {
				display: flex;
				flex-direction: column;
				flex: 1;
				justify-content: center;
				height: 150rpx;

				&-nickname {
					font-size: 50rpx;
				}

				&-username {
					font-size: 28rpx;
				}
			}

		}

		.operate {
			display: flex;
			justify-content: center;
			width: 100%;
			height: 80rpx;
			margin-bottom: 60rpx;

			&-btn {
				width: 200rpx;
				height: 100%;
				border-radius: 15rpx;
				border: 1rpx solid #333;
				text-align: center;
				line-height: 80rpx;
			}

			&-login {
				background-color: #1a2722;
				color: #fff;
				margin-left: 60rpx;
			}
		}

		.order {
			box-sizing: border-box;
			padding: 10rpx 60rpx;
			width: 100%;
			height: 208rpx;
			background-color: #fff;

			&-title {
				line-height: 60rpx;
				font-size: 28rpx;

				

				&::after {
					display: block;
					content: "";
					border: 1rpx solid #ccc;
				}
			}

			&-operate {
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;

				&-item {
					margin-top: 15rpx;
					&-img{
						font-size: 60rpx;
						font-size: 400;
					}
					&-title {
						font-size: 28rpx;
					}
				}

			}
		}
		
		.bottom {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 60rpx;
			box-sizing: border-box;
			width: 100%;
			padding: 30rpx 0 60rpx;
			background-color: #fff;
			&-item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				width:33.3% ;
				height: 200rpx;
				text-align: center;
				&-img{
					font-size: 60rpx;
				}
				&-title{
					margin-top: 15rpx;
					font-size: 28rpx;
				}
			}
		}


	}
</style>
